<%@page contentType="text/html" pageEncoding="UTF-8" import="org.bsscheduler.*"%>
<jsp:useBean id="user" class="org.bsscheduler.User" scope="session" />

<%-- if not logged in, go to login page --%>
<% if (!user.getLoggedIn()) {%>
<jsp:forward page="index.jsp" />
<% } %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>bsscheduler Dashboard</title>
        <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
        <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/button/assets/skins/sam/button.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/calendar/assets/skins/sam/calendar.css">
        <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/calendar/calendar-min.js"></script>


        <link REL=StyleSheet HREF="site.css" TYPE="text/css" MEDIA=screen>
        <script type="text/javascript" src="jquery.js"></script>

        <%

            int currentMonth = Calendar.getCurrentMonth();
            int currentYear = Calendar.getCurrentYear();

            String currentDate = user.getCurrentDate();
            String currentDateArray[];

            if( currentDate != null){
                currentDateArray=currentDate.split("-");
                currentYear = Integer.parseInt(currentDateArray[0]);
                currentMonth = Integer.parseInt(currentDateArray[1]);
            }

            String yearString = "";
        %>



        <script type="text/javascript">

            function updateCalendar(){
                // alert( $(document).width() + "x" + $(document).height());

                // alert( browserWidth + " x " + browserHeight);

                cellHeight = (browserHeight*0.80)/6;
                cellHeight = cellHeight + "px";
                $("#calendar td.month").css("height",cellHeight);
                $("#calendar td.not_month").css("height",cellHeight);
                $("#calendar td.month_no_events").css("height",cellHeight);
                $("#calendar td.not_month_no_events").css("height",cellHeight);

            };


            function windowResized(){
                // Update the browser width and e

                browserWidth = Dom.getClientWidth();
                browserHeight = Dom.getClientHeight();

            };


            var yearOut = "";

            var currentMonth = <%= currentMonth %>;
            var currentYear = <%= currentYear %>;
            var monthString=new Array("","January","February","March","April","May","June","July","August","September","October","November","December");

            // this function is run upon loding of
            $(document).ready(function(){


            <%  yearString = new Integer(currentYear).toString();
        yearString += "-";
        yearString += new Integer(currentMonth).toString();
        yearString += "-1";
            %>

                    yearOut = "<%=yearString%>";

                    $("#calendarhere").load("showcalendar.jsp",
                    {Date: yearOut},function(){
                        // run this once upon initialization
                        windowResized();
                        updateCalendar();
                    });

                    $("#currentmonth").html("<a href=\"#\" onclick=\"decrementMonth()\">&lt;</a>&nbsp;" +
                        monthString[currentMonth] + ", " + currentYear +
                        "&nbsp;<a href=\"#\" onclick=\"incrementMonth()\">&gt;</a>");

                    // updateCalendar();
                });


                function incrementMonth(){

                    currentMonth++;
                    if(currentMonth > 12){
                        currentMonth = 1;
                        currentYear++;
                    }



                    calyear= currentYear + "-" + currentMonth + "-1" ;

                    // alert(currentYear + "-" + currentMonth + "-1" );
                    $("#calendarhere").load("showcalendar.jsp",
                    {Date: calyear},function(){
                        // run this once upon initialization
                        windowResized();
                        updateCalendar();
                    });

                    $("#currentmonth").html("<a href=\"#\" onclick=\"decrementMonth()\">&lt;</a>&nbsp;" +
                        monthString[currentMonth] + ", " + currentYear +
                        "&nbsp;<a href=\"#\" onclick=\"incrementMonth()\">&gt;</a>");
                    // updateCalendar();

                }

                function decrementMonth(){

                    currentMonth--;
                    if(currentMonth < 1){
                        currentMonth = 12;
                        currentYear--;
                    }

                    calyear= currentYear + "-" + currentMonth + "-1" ;

                    // alert(currentYear + "-" + currentMonth + "-1" );
                    $("#calendarhere").load("showcalendar.jsp",
                    {Date: calyear}, function(){
                        // run this once upon initialization
                        windowResized();
                        updateCalendar();
                    });

                    $("#currentmonth").html("<a href=\"#\" onclick=\"decrementMonth()\">&lt;</a>&nbsp;" +
                        monthString[currentMonth] + ", " + currentYear +
                        "&nbsp;<a href=\"#\" onclick=\"incrementMonth()\">&gt;</a>");

                    // updateCalendar();

                }




        </script>

    </head>
    <body class="yui-skin-sam">
        <div id="doc3" class="yui-t3">
            <div id="hd">
                <div id="#uppermenu">
                    <form class="uppermenu"name="mainlogout" action="index.jsp?action=logout" method="POST">
                        logged in as <%= user.getFirstName()%>&nbsp;&#124&nbsp;
                        <input type="hidden" value="Log out" />
                        <a href="#" onclick="document.mainlogout.submit();">logout</a>
                    </form>

                </div>
            </div>

            <div id="bd">
                <div id="yui-main">
                    <div class="yui-b"><div class="yui-g">

                            <div id="currentmonth"><span/></div>
                            <div id="calendarhere"><span/></div>


                        </div>
                    </div>
                </div>
                <div class="yui-b">

                    <div id="menu">
                        <h1><a href="#" onclick="showCreateDialog('')">Create</a></h1>
                    </div>

                    <div id="upcoming" class="navbox">
                        <h1>Upcoming</h1>

                        <jsp:useBean id="eventlist" class="org.bsscheduler.EventsDisplay" />
                        <% eventlist.setEventList(user.events);
        eventlist.setUserName(user.getEmail());
                        %>
                        <%= eventlist.getUpcomingEvents(10)%>
                    </div>


                    <div id="pending" class="navbox">
                        <h1>Invitations</h1>
                        <%= eventlist.getPendingEvents()%>
                    </div>



                </div>

            </div>
            <div id="ft"></div>

        </div>


        <!-- End of Main Page Content -->


        <script type="text/javascript">
            var browserWidth;
            var browserHeight;
            var Dom = YAHOO.util.Dom;


            YAHOO.namespace("scheduler");
            function init() {

                // dialog form events
                var handleSubmit = function() {
                    this.submit();
                };
                var handleCancel = function() {
                    this.cancel();
                };

                window.onresize = function(){
                    windowResized();
                    updateCalendar();
                };

                // createevent dialog
                YAHOO.scheduler.createEventDialog = new YAHOO.widget.Dialog("createevent",
                { width : "30em",
                    fixedcenter : true,
                    visible : false,
                    constraintoviewport : true,
                    postmethod: "form",
                    buttons : [ { text:"Create", handler:handleSubmit, isDefault:true },
                        { text:"Cancel", handler:handleCancel } ]
                });

                // modifyevent dialog
                YAHOO.scheduler.modifyEventDialog = new YAHOO.widget.Dialog("modifyevent",
                { width : "30em",
                    fixedcenter : true,
                    visible : false,
                    constraintoviewport : true,
                    postmethod: "form",
                    buttons : [ { text:"Cancel Appointment", handler:handleSubmit },
                        { text:"Close", handler:handleCancel, isDefault:true} ]
                });

                // createevent form validation
                YAHOO.scheduler.createEventDialog.validate = function() {
                    var data = this.getData();
                    var isValid = true;
                    if (data.title == "") {
                        isValid = false;
                        $("#title-required").show();
                    } else {
                        $("#title-required").hide();
                    }

                    if (data.startdate == "") {
                        isValid = false;
                        $("#startdate-required").show();
                    } else {
                        $("#startdate-required").hide();
                    }

                    if (data.starttime == "") {
                        isValid = false;
                        $("#starttime-required").show();
                    } else {
                        $("#starttime-required").hide();
                    }

                    if (data.enddate == "") {
                        isValid = false;
                        $("#enddate-required").show();
                    } else {
                        $("#enddate-required").hide();
                    }

                    if (data.endtime == "") {
                        isValid = false;
                        $("#endtime-required").show();
                    } else {
                        $("#endtime-required").hide();
                    }

                    return isValid;
                };
                YAHOO.scheduler.createEventDialog.render();
                YAHOO.scheduler.modifyEventDialog.render();


                // calendar events
                function calStartSelectHandler(type, args, obj) {
                    var selDate = args[0][0];
                    var year = selDate[0]
                    var month = selDate[1];
                    var day = selDate[2];
                    var formattedDate = year + "-";
                    if (month < 10 ) formattedDate = formattedDate + "0";
                    formattedDate = formattedDate + month + "-";
                    if (day < 10) formattedDate = formattedDate + "0";
                    formattedDate = formattedDate + day;
                    $("#createevent #startdate").attr("value", formattedDate);
                    hideAllCalendars();
                };

                function calEndSelectHandler(type, args, obj) {
                    var selDate = args[0][0];
                    var year = selDate[0]
                    var month = selDate[1];
                    var day = selDate[2];
                    var formattedDate = year + "-";
                    if (month < 10 ) formattedDate = formattedDate + "0";
                    formattedDate = formattedDate + month + "-";
                    if (day < 10) formattedDate = formattedDate + "0";
                    formattedDate = formattedDate + day;
                    $("#createevent #enddate").attr("value", formattedDate);
                    hideAllCalendars();
                };

                // Create calendars for create-appointment window
                YAHOO.scheduler.calStart = new YAHOO.widget.Calendar("calStartContainer",
                { title: "Choose start date",
                    close: true
                });
                YAHOO.scheduler.calStart.selectEvent.subscribe(calStartSelectHandler, YAHOO.scheduler.calStart, true);
                YAHOO.scheduler.calStart.render();

                YAHOO.scheduler.calEnd = new YAHOO.widget.Calendar("calEndContainer",
                { title: "Choose end date",
                    close: true
                });
                YAHOO.scheduler.calEnd.selectEvent.subscribe(calEndSelectHandler, YAHOO.scheduler.calEnd, true);
                YAHOO.scheduler.calEnd.render();

            }

            YAHOO.util.Event.onDOMReady(init);

            function showCreateDialog(date) {
                YAHOO.scheduler.modifyEventDialog.hide();

                YAHOO.scheduler.calStart.clear();
                YAHOO.scheduler.calEnd.clear();
                if (date != "") {
                    var dateArray = date.split("-");
                    var year = parseInt(dateArray[0]);
                    var month = parseInt(dateArray[1]);
                    $("#createevent #startdate").attr("value", date);
                    $("#createevent #enddate").attr("value", date);
                    YAHOO.scheduler.calStart.setYear(year);
                    YAHOO.scheduler.calStart.setMonth(month - 1);
                    YAHOO.scheduler.calStart.render();
                    YAHOO.scheduler.calEnd.setYear(year);
                    YAHOO.scheduler.calEnd.setMonth(month - 1);
                    YAHOO.scheduler.calEnd.render();
                }
                $("#createevent #title").attr("value", "");
                $("#createevent #description").attr("value", "");
                $("#createevent #starttime").attr("value", "");
                $("#createevent #endtime").attr("value", "");
                $("#createevent option").removeAttr("selected");
                $("#createevent .validationError").hide();
                YAHOO.scheduler.createEventDialog.show();

            }

            function showModifyDialog(uuid, title, desc, startdate, starttime,
            enddate, endtime, participants, editable) {

                YAHOO.scheduler.createEventDialog.hide();

                $("#modifyevent #moduuid").val(uuid);
                $("#modifyevent #modtitle").val(unescape(title));
                $("#modifyevent #moddescription").val(unescape(desc));
                $("#modifyevent #modstartdate").val(startdate);
                $("#modifyevent #modstarttime").val(starttime);
                $("#modifyevent #modenddate").val(enddate);
                $("#modifyevent #modendtime").val(endtime);
                $("#modifyevent #modparticipants").empty();
                $("#modifyevent .validationError").hide();

                var pArray = eval(participants);

                for (var i = 0; i < pArray.length; i++) {
                    var pString = pArray[i][0] + " (" + pArray[i][1] + ")<br/>\n";
                    $("#modifyevent #modparticipants").append(pString);
                }

                YAHOO.scheduler.modifyEventDialog.show();

            }

            function showStartCalendar() {
                YAHOO.scheduler.calEnd.hide();
                YAHOO.scheduler.calStart.show();
            }

            function showEndCalendar() {
                YAHOO.scheduler.calStart.hide();
                YAHOO.scheduler.calEnd.show();
            }

            function hideAllCalendars() {
                YAHOO.scheduler.calStart.hide();
                YAHOO.scheduler.calStartMod.hide();
            }
        </script>

        <div id="createevent">
            <div class="hd">Create New Appointment</div>
            <div class="bd">
                <form action="createevent.jsp" method="post">
                    <input type="hidden" name="seesionCurrentMonth" id="sessionCurrentMonth">
                    <input type="hidden" name="sessionCurrentYear" id="sessionCurrentYear">

                    <div class="form-row"><label for="title">title: </label><input type="text" id="title" name="title" size="16"
                                                                                       onfocus="hideAllCalendars()"/>
                    <span class="validationError" id="title-required">required</span></div>
                    <div class="form-row"><label for="description">description: </label><input type="text" id="description" name="description" size="20"
                                                                                               onfocus="hideAllCalendars()"/></div>
                    <div class="form-row"><label for="startdate">start date: </label><input type="text" id="startdate" name="startdate" size="10"
                                                                                                onfocus="showStartCalendar()"/>
                    <span class="validationError" id="startdate-required">required</span></div>
                    <div id="calStartContainer"></div>
                    <div class="form-row"><label for="starttime">start time: </label><input type="text" id="starttime" name="starttime" size="10"
                                                                                                onfocus="hideAllCalendars()"/>
                    <span class="validationError" id="starttime-required">required</span></div>
                    <div class="form-row"><label for="enddate">end date: </label><input type="text" id="enddate" name="enddate" size="10"
                                                                                            onfocus="showEndCalendar()"/>
                    <span class="validationError" id="enddate-required">required</span></div>
                    <div id="calEndContainer"></div>
                    <div class="form-row"><label for="endtime">end time: </label><input type="text" id="endtime" name="endtime" size="10"
                                                                                            onfocus="hideAllCalendars()"/>
                    <span class="validationError" id="endtime-required">required</span></div>
                    <div class="form-row"><label for="participants">participants: </label>
                        <select multiple="yes" id="participants" name="participants" size="4"
                                onfocus="hideAllCalendars()">
                            <%=UsersDB.getSelectionList(user.getEmail())%>
                        </select>
                    </div>
                    <div style="clear:both;"></div>
                </form>
            </div>

        </div>


        <div id="modifyevent">
            <div class="hd">View Appointment Details</div>
            <div class="bd">
                <form action="updateevent.jsp" method="post">
                    <input type="hidden" id="modSessionCurrentMonth" name="sessionCurrentMonth">
                    <input type="hidden" id="modSessionCurrentYear" name="sessionCurrentYear">
                    <input type="hidden" id="modcancel" name="cancel" value="cancel"/>
                    <input type="hidden" id="moduuid" name="uuid"/>
                    <div class="form-row"><label for="modtitle">title: </label>
                        <input type="text" id="modtitle" name="title" size="16" disabled/>
                    </div>
                    <div class="form-row"><label for="moddescription">description: </label>
                        <input type="text" id="moddescription" name="description" size="20" disabled/>
                    </div>
                    <div class="form-row"><label for="modstartdate">start date: </label>
                        <input type="text" id="modstartdate" name="startdate" size="10" disabled/>
                    </div>
                    <div class="form-row"><label for="modstarttime">start time: </label>
                        <input type="text" id="modstarttime" name="starttime" size="10" disabled/>
                    </div>
                    <div class="form-row"><label for="modenddate">end date: </label>
                        <input type="text" id="modenddate" name="enddate" size="10" disabled/>
                    </div>
                    <div class="form-row"><label for="modendtime">end time: </label>
                        <input type="text" id="modendtime" name="endtime" size="10" disabled/>
                    </div>
                    <div class="form-row"><label for="modparticipants">participants: </label>
                        <div id="modparticipants"></div>
                    </div>
                    <div class="cancel_note">Note: You can only cancel appointments you created.</div>
                    <div style="clear:both;"></div>
                </form>
            </div>
        </div>


    </body>
</html>
